<template>
  <div class="account">
    <div class="addToken">
      <button @click="toAddToken">添加额度</button>
    </div>
    <div class="quota">

      <div class="quota_list">
        <H4>我的额度</H4>
        <div class="quota_content">
          <div class="quota_item">
            <img src="../../assets/img/aiChat.png" alt="">
            <p class="used">已使用:<span>{{ AccountQuota.usedQuota }}</span></p>
          </div>
          <div class="quota_item">
            <img src="../../assets/img/aiChat.png" alt="">
            <p class="used">总额:<span>{{ AccountQuota.totalQuota }}</span></p>
          </div>
        </div>
      </div>

      <div class="quota_query">
        <H4>记录</H4>
        <div>
          <el-input type="Date" style="width: 240px" placeholder="开始时间" />
          <el-input type="Date" style="width: 240px" placeholder="结束时间" />
          <el-button type="primary" style="margin-left: 20px">查询</el-button>
        </div>
      </div>

      <div class="quota_list_content">
        <div class="item_title">
          <span>编号</span>
          <span>记录</span>
          <span>时间</span>
          <span>类型</span>
          <span>备注</span>
        </div>
        <div class="scroll" ref="scrollRef">

          <div class="" :style="{ height: itemHeight * accountList.length + 'px' }">
            <!-- <div class="" :style="{ height: top + 'px' }">  -->
            <!-- 这里不能直接设置滚动条的高度撑起盒子高度，-->
            <!--  因为 滚动条滚动触发监听事件，盒子高度变化  再触发滚动事件 再更新盒子高度 再触发滚动事件   成为死循环GG -->
          </div>
          <!-- //此处的定位需要随滚动条下移动 -->
          <div class="list-wrapper" :style="{ top: top + 'px' }">
            
            <div class="item" v-for="item in showList" :key="item.id">
              <span>{{ item.serialNumber }}</span>
              <span>{{ item.consumption }}</span>
              <span>{{ item.created }}</span>
              <span>{{ item.type == 0 ? ' 充值' : '消耗' }}</span>
              <span>{{ item.remarks }}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script lang='ts' setup>
import { reactive, onMounted ,defineEmits, ref }   from 'vue'
import { getAccountQuota,getAccountList ,IAccountItem} from '@/api/account';



//总额度使用
const AccountQuota = reactive({
  usedQuota:0,
  totalQuota:0
})
//额度明细列表分页
const listPageSize = reactive({
  page:1,
  pagesize:100,
  total:0
})


const accountList = ref<IAccountItem[]>([])//数组请求获取的总数据   默认为空
const showList = ref<IAccountItem[]>([])// 可视区域需要渲染的数据 , 需要截取计算

const itemHeight = ref<number>(46) //单个列表高度 预定义 
const showNum = ref<number>(0)   // 容器放多少item  和 DOM 防止留白 一般多渲染两个盒子(前后各一个)
const num = ref<number>(4)  //滚动需要更换的数据条数  这个没用上 直接*1.4的渲染条数了
const top = ref<number>(0)  //顶部需要撑起的盒子高度
const scrollRef = ref<HTMLElement | null>(null) // 容器绑定  查询可视区域



// 需要获取容器的信息 所以onMounted必须使用  dom加载完成 后执行
onMounted( async ()=>{
  await getAccountQuotaAPI()
             computeVideoData()
  //加载后获取监听滚动容器  
  scrollRef.value?.addEventListener('scroll', handleScroll)
})


// 请求数据
const getAccountQuotaAPI = async () => {
  const res = await getAccountQuota()
  if (res.code === 0) {
    // 合并对象(目标对象, 被合并对象)   相同的属性名  后者覆盖前者
    Object.assign(AccountQuota, res.data)
  }
  const listRes = await getAccountList(listPageSize)
  accountList.value = listRes.data.items
}

//处理视图
const computeVideoData  =  ()=>{
  //计算需要渲染的可视列表数据
  showNum.value = Math.ceil(parseInt(window.getComputedStyle(scrollRef.value).getPropertyValue('height')) / itemHeight.value) + 1
  // 第一次加载数据 截取数据  获取不到accountList
  showList.value = accountList.value.slice(0, showNum.value)
}

// 展示区的列表  滚动时更新 处理视图
const handleScroll = (e:Event)=>{
  let startIndex = Math.max(Math.floor(e.target?.scrollTop / itemHeight.value))
  // 结束位置    开始位置 + 显示的个数  多渲染缓存一些数据 避免滚动的时候出现空白
  // 这里在多加了 第一次滚动后 多加了 40%的数据 做预渲染 防止滚动出现空白
  // 如果不设置，  滚动条 每次滚动一下 都需要页面进行一次渲染 渲染速度会很慢  每次多拿一部分数据 多渲染一部分 避免滚动的时候出现空白
  let endIndex = Math.min(startIndex + Math.floor(showNum.value * 1.4),  accountList.value.length)
  // console.log('开始', startIndex, '结束', endIndex);
  // console.log('总长度',accountList.value.length);
    showList.value = accountList.value.slice(startIndex, endIndex)
  top.value = startIndex * itemHeight.value

}




//切换页面跳转
const emit = defineEmits(['toAddToken'])
const toAddToken = ()=>{
  emit('toAddToken')
}


</script>
<style scoped lang='scss'>

       .addToken{
        button{
         background-color: #c90000;
         border: none;
         border-radius: 0.5vw;
         color: #fff;
        padding: 10px 25px;
        box-shadow: 0 0 1px   gray; 
        cursor: pointer;
        }
        }
.quota_query{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  align-items: center;
}




        .quota_list{
          display: flex;
          margin: 12px 0;
          align-items: center;
          h4{
            margin-right: 15px;
          }

        }

                                    .quota_content {
                                      flex: 1;
                                      display: flex;
                                      padding: 15px 15px;
                                      border: 1px solid #DBDBDB;
                                      border-radius: 6px;
                  
                                      .quota_item {
                                        display: flex;
                                        width: 50%;
                                        align-items: center;
                  
                                        img {
                                          margin-right: 5px;
                                        }
                                      }
                  
                                    }
          .item_title{
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-evenly;

          }
        .scroll{
          height: 310px;
          border-radius: 8px;
          border: 1px solid #DBDBDB;
          position: relative;
          // overflow-y: scroll;
          overflow-y: auto;
          
        }
          .list-wrapper{
            position: absolute;
            padding: 0 5px;
            width: 100%;
            box-sizing: border-box;
              .item{
            border-bottom: 1px solid gray;
            padding: 10px ;
            box-sizing: border-box;
            display: flex;
            justify-content: space-evenly;
            cursor: pointer;
            &:hover{
              background-color: rgba($color: #000000, $alpha: .1);
            }
          }
        }
</style>
